<template>
  <view class="container" v-if="isLoaded">
    <swiper
      class="banner-swiper"
      circular
      autoplay
      :interval="5000"
      :duration="1000"
    >
      <swiper-item
        class="banner-swiper-item"
        v-for="(item, index) in pageData.FProImage"
        :key="index"
      >
        <image :src="imageUrl + item.FGoodImg" mode="widthFix" />
        <!-- <image src="/static/image/Home.png" mode="widthFix" /> -->
      </swiper-item>
    </swiper>
    <view class="row">
      <view class="col">{{ pageData.FName }}</view>
      <view class="col">
        <text style="color: #ff351f; font-size: 16px">￥</text>
        {{ pageData.FMallPrice }}
        <!-- <text style="font-size: 10px">/ {{ pageData.FUnitName }}</text> -->
      </view>
    </view>
    <view class="row row-2">
      <view class="col"> </view>
      <view class="col"> 库存：{{ pageData.FQty }}</view>
    </view>

    <view class="gap"></view>
    <view class="details">
      <view class="details-title">商品详情</view>
      <feng :content="decodeURIComponent(pageData.FContent)" />
    </view>

    <view class="btn-bottom">
      <view class="icon-container" @tap="goToUrl(1)">
        <image class="icon" src="/static/images/house.png" />
        <text class="txt">首页</text>
      </view>
      <view class="icon-container" @tap="goToUrl(2)">
        <image class="icon" src="/static/images/cart.png" />
        <text class="txt">购物车</text>
        <view class="icon-num" v-if="tCount > 0">{{ tCount }}</view>
      </view>
      <button class="btn-bottom-add" v-on:tap="addToShoppingCart">
        加入购物车
      </button>
    </view>
  </view>
</template>
<script>
import {
  uGetStorageSync,
  uNavigateBack,
  uNavigateTo,
  uSwitchTab,
  uToast,
} from "../../utils/uniUtils";
import feng from "../../components/feng-parse/parse.vue";
import { useUser } from "../../store/useUser";
import { reqPost } from "../../common/http.request";
import { onMounted, reactive, toRefs } from "@vue/composition-api";
import { useShop } from "../../store/useShop";
import { storeToRefs } from "pinia";

export default {
  components: {
    feng,
  },
  onLoad(options) {
    this.goods_id = options.id;
  },
  setup() {
    onMounted(async () => {
      try {
        await getPageData();
        data.isLoaded = true;
      } catch (error) {
        console.log("error-->", error);
        data.isLoaded = false;
        uToast("数据初始化失败~~", "error");
        setTimeout(() => {
          uNavigateBack();
        }, 1500);
      }
    });
    const { hasLogin } = storeToRefs(useUser());
    const { cart, tCount } = storeToRefs(useShop());
    const { AddToCart } = useShop();

    const data = reactive({
      goods_id: null,
      pageData: null,
      isLoaded: false,
      isLogin: false,
      icon_num: 0,
    });

    async function getPageData() {
      data.pageData = (
        await reqPost("GetGoodsDetail", {
          goods_id: data.goods_id,
        })
      ).Data;
    }

    function goToUrl(l) {
      uSwitchTab(l == 1 ? "/pages/tab_bar/index" : "/pages/tab_bar/cart");
    }

    async function addToShoppingCart() {
      if (!hasLogin) {
        uNavigateTo("/pages/login/login");
        /*    if (uGetStorageSync("hasBindStore")) {
        } else {
          uToast("未绑定店铺~", "error");
        } */
      } else {
        await AddToCart(data.goods_id, data.FMallPrice);
      }
    }

    return {
      ...toRefs(data),
      goToUrl,
      tCount,
      addToShoppingCart,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efeff4;

  height: 100vh;
  overflow-y: scroll;
  padding-bottom: 70px;
  .banner-swiper {
    background-color: #fff;
    width: 100%;
    height: 550rpx;
    .banner-swiper-item {
      image {
        width: 100%;
      }
    }
  }

  .gap {
    height: 35px;
    background-color: #efeff4;
  }

  .details {
    min-height: 750rpx;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 30px;
    padding: 10px 5px;
    &-title {
      color: #141414;
      margin-bottom: 5px;
    }
  }
}

.btn-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  border-top: 1px solid #ebebeb;
  padding: 6px;
  background-color: #fff;

  display: flex;
  align-items: center;

  .icon-container {
    &:first-of-type {
      margin-left: 6px;
    }
    position: relative;

    height: 53px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    .icon {
      width: 25px;
      height: 25px;
      margin-bottom: 2px;

      &-num {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 14px;
        height: 14px;
        font-size: 10px;
        background-color: #ff2838;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 14px;
      }
    }
    .txt {
      margin-top: 2px;
      font-size: 12px;
    }
  }
  &-add {
    flex: 1;
    color: #fff;
    background-color: #ff2838;
    border-radius: 20px;
  }
}

.row {
  display: flex;
  background-color: #fff;

  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 5px;

  &-2 {
    padding: 5px 12px 15px;
  }
  .col {
    font-size: 15px;
  }
}
</style>
